<ul class="breadcrumb">
    <li>
        <a href="#">用户首页</a> <span class="divider">/</span>
    </li>
    <li>
        <a href="/u/<%=user.mail%>?page=home-involve&active=nav-list-2">参与项目</a> <span class="divider">/</span>
    </li>
    <li class="active">项目ID</li>
</ul>


<div class="row">
    <div class="span4" id="cd-level1">
        <h3>类图信息</h3>
        <hr/>
        <div id="icd-cd-name" style = "background-color: #E0E0E0; -webkit-border-radius: 4px;padding: 8px 35px 8px 14px;">
            <%- partial('icd-element', {type:"cd",lable:"类图名",name:"Web CD Design based on Stig",hasDelete:0}) %>
        </div>
        <hr/>
        <div id="icd-cd-class" style = "background-color: #E0E0E0; -webkit-border-radius: 4px;padding: 8px 35px 8px 14px;">
            <div class="element">
            <%- partial('icd-element',{type:"class",lable:"类名",name:"Class",hasDelete:1}) %>
            <%- partial('icd-element',{type:"class",lable:"类名",name:"Relation",hasDelete:1}) %>
            <%- partial('icd-element',{type:"class",lable:"类名",name:"Attribute",hasDelete:1}) %>
            </div>
            <a href="javascript:;" class="btn icd-add" name="类名">添加</a>
        </div>
        <br/>
        <hr/>
        <div id="icd-cd-relation" style = "background-color: #E0E0E0; -webkit-border-radius: 4px;padding: 8px 35px 8px 14px;">
            <div class="element">
                <%- partial('icd-element-double',{type:"relation",lable:"关系",name1:"xx",name2:"yy"}) %>
                <%- partial('icd-element-double',{type:"relation",lable:"关系",name1:"xx",name2:"yy"}) %>
            </div>
            <a href="javascript:;" class="btn icd-relation-add" name="关系">添加</a>
        </div>
        <br/>
        <hr/>
    </div>
    <div class="span4" id="cd-level2" >
        <h3>类信息</h3>
        <hr/>
        <div id="icd-class-name" style = "background-color: #E0E0E0; -webkit-border-radius: 4px;padding: 8px 35px 8px 14px;">
            <%- partial('icd-element',{type:"class",lable:"类名",name:"Class",hasDelete:0}) %>
        </div>
        <hr/>
        <div id="icd-class-attr" style = "background-color: #E0E0E0; -webkit-border-radius: 4px;padding: 8px 35px 8px 14px;">
            <div class="element">
                <%- partial('icd-element',{type:"attr",lable:"属性",name:"1",hasDelete:1}) %>
                <%- partial('icd-element',{type:"attr",lable:"属性",name:"2",hasDelete:1}) %>
                <%- partial('icd-element',{type:"attr",lable:"属性",name:"3",hasDelete:1}) %>
            </div>
            <a href="javascript:;" class="btn icd-add" name="属性">添加</a>
        </div>
        <br/>
        <hr/>
    </div>
    <div class="span4" id="cd-level3">
        <h3>属性信息</h3>
        <hr/>
        <div id="icd-attr-name" style = "background-color: #E0E0E0; -webkit-border-radius: 4px; padding: 8px 35px 8px 14px;">
            <%- partial('icd-element',{type:"attr",lable:"属性",name:"1",hasDelete:0}) %>
        </div>
        <hr/>
        <div id="icd-attr-val" style = "background-color: #E0E0E0; -webkit-border-radius: 4px;padding: 8px 35px 8px 14px;">
            <div class="element">
                <%- partial('icd-element',{type:"type",lable:"类型",name:"String",hasDelete:1}) %>
                <%- partial('icd-element',{type:"multi",lable:"多重性",name:"123",hasDelete:1}) %>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function(){
        window.mutex_input_dblclick = 0;
        var timer=null;
        $(".icd-element-name").live("dblclick",function(){
            if(window.mutex_input_dblclick) return;
            else window.mutex_input_dblclick=1;

            clearTimeout(timer);

            $(this).hide();
            $(this).parent().children(".icd-element-input").show();
        });

        $(".icd-element-name").live("click",function(){
            if(window.mutex_input_dblclick) return;

            clearTimeout(timer);
            var that = $(this);
            timer = setTimeout(function(){
                var lable = $(that).parent().children("label").text();
                switch(lable){
                    case "类名":
                        clickOnClass($(that));
                        break;
                    case "属性":
                        clickOnAttribute($(that));
                        break;
                }
            },300);
        });

        $(".icd-element-input-submit").live("click",function(){
            var old = $(this).parent().parent().children("input[type='text']").val();
            $(this).parent().parent().parent().children("p").text(old);
            $(this).parent().parent().hide();
            $(this).parent().parent().parent().children(".icd-element-name").show();
            window.mutex_input_dblclick = 0;
        });

        $(".icd-element-input-cancel").live("click",function(){
            var old = $(this).parent().parent().parent().children("p").text();
            $(this).parent().parent().children("input[type='text']").val(old);

            $(this).parent().parent().hide();
            $(this).parent().parent().parent().children(".icd-element-name").show();
            window.mutex_input_dblclick = 0;
        });

        $(".icd-element-input-delete").live("click",function(){
            $(this).parent().parent().parent().remove();
            window.mutex_input_dblclick = 0;
        });

        $(".icd-add").bind("click",function(){
            if(window.mutex_input_dblclick)   return;
            var that = this;
            var val = $(this).attr("name");
            $.ajax({
                url: '/post/html/icd-element',
                type: 'post',
                data: {lable: val},
                success: function(html)
                {
                    $(that).parent().children(".element").append(html);
                    window.mutex_input_dblclick=1;
                    that = $(that).parent().children(".element").children().last();

                    $(that).children(".icd-element-name").hide();
                    $(that).children(".icd-element-input").show();
                }
            });
        });

        function clickOnClass(that){
            $("#cd-level2").children().remove();
            $("#cd-level3").children().remove();
            $.ajax({
                url: '/post/html/icd-span-class',
                type: 'post',
                data: {lable: ''},
                success: function(html)
                {
                    $("#cd-level2").append(html);
                }
            });
        }

        function clickOnAttribute(that){
            $("#cd-level3").children().remove();
            $.ajax({
                url: '/post/html/icd-span-attr',
                type: 'post',
                data: {lable: ''},
                success: function(html)
                {
                    $("#cd-level3").append(html);
                }
            });
        }


        $(".icd-element-relation-name").live("dblclick",function(){
            if(window.mutex_input_dblclick) return;
            else window.mutex_input_dblclick=1;

            clearTimeout(timer);
            $(this).parent().children().hide();
            $(this).parent().children(".icd-element-input").show();
        });

        $(".icd-element-relation-name").live("click",function(){
            if(window.mutex_input_dblclick) return;
            clearTimeout(timer);
            var that = $(this);
            timer = setTimeout(function(){
                var lable = $(that).parent().children("label").text();

                $("#cd-level2").children().remove();
                $("#cd-level3").children().remove();
                $.ajax({
                    url: '/post/html/icd-span-relation',
                    type: 'post',
                    data: {lable: ''},
                    success: function(html)
                    {
                        $("#cd-level2").append(html);
                    }
                });
            },300);
        });

        $(".icd-element-relation-input-submit").live("click",function(){
            var class1= $(this).parent().parent().children(".icd-element-input").children(".input-1").val();
            var class2= $(this).parent().parent().children(".icd-element-input").children(".input-2").val();

            var relationname = class1 +' - '+class2;
            $(this).parent().parent().parent().children("p").text(relationname);

            $(this).parent().parent().parent().children().show();
            $(this).parent().parent().hide();
            window.mutex_input_dblclick = 0;
        });

        $(".icd-element-relation-input-cancel").live("click",function(){
            var relationname = $(this).parent().parent().parent().children("p").text();
            relationname = relationname.split(" - ");

            $(this).parent().parent().children(".icd-element-input").children(".input-1").val(relationname[0]);
            $(this).parent().parent().children(".icd-element-input").children(".input-2").val(relationname[1]);

            $(this).parent().parent().parent().children().show();
            $(this).parent().parent().hide();

            window.mutex_input_dblclick = 0;
        });

        $(".icd-element-relation-input-delete").live("click",function(){
            $(this).parent().parent().parent().remove();
            window.mutex_input_dblclick = 0;
        });

        $(".icd-relation-add").bind("click",function(){
            if(window.mutex_input_dblclick)   return;
            var that = this;
            var val = $(this).attr("name");
            $.ajax({
                url: '/post/html/icd-element-double',
                type: 'post',
                data: {lable: val},
                success: function(html)
                {
                    $(that).parent().children(".element").append(html);
                    window.mutex_input_dblclick=1;
                    that = $(that).parent().children(".element").children().last();

                    $(that).children().hide();
                    $(that).children(".icd-element-input").show();
                }
            });
        });
    });
</script>